<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行程介绍</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="wap-font-scale" content="no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="format-detection" content="telephone=no,email=no,address=no,date=no" />
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/public.css">
    <link rel="stylesheet" href="../../common/css/pages.css">
    <style type="text/css">
        #allmap .BMap_Marker img{width:100%;height:100%;}
        [v-cloak] {display:none;}
    </style>
    <script>
        /*
        *   轨迹绑路  时间段  滑动效果展示
        * */
        window.onload=function () {
            if(baseAll.isMobileDevice()=='ios'){
                routeTrack.iosLoad();
            }
            baseAll.deviceReturn();
        }
    </script>
</head>
<body>
      <div class="top_fixed">
            <!--头部返回与标题-->
            <header id="top_back" class="txt_center">
                    <a href="javascript:;" class="back_btn"></a>
                    <h3 class="tableBox">行程介绍</h3>
            </header>
            <!-- 选项卡内容区块 -->
            <section id="tour_tab_list">
                <ul class="flex">
                    <li class="active"><a href="javascript:;"><span>驾驶轨迹</span></a></li>
                    <li><a href="javascript:;"><span>驾驶报告</span></a></li>
                 </ul>
            </section>
      </div>
      <!--地图详情的展开与收缩-->
      <div class="map_manger">
          <div id="find_map_detail">
              <a href="javascript:;" class="init" id="show_full_screen"></a>
          </div>
          <!--锁路和轨迹-->
          <div class="track_road">
              <a href="javascript:;" class="block track_line"></a>
              <a href="javascript:;" class="block key_line"></a>
          </div>
      </div>

       <!-- 选项卡内容区块 -->
       <section id="tab-cont" v-cloak style="height:100%;">
        <!-- 驾驶轨迹 -->
        <div class="mapArea car_report" style="height:100%">
            <div id="allmap" style="height:100%"></div>
            <div class="bot_Box">
                <div class="pad">
                    <div class="top clearfix">
                        <p class="fl" style="padding-left:0.1rem">
                            <span>行程距离</span>
                            <span class="total_dis"><b>{{distance}}</b>KM</span>
                        </p>
                        <p class="fr timer" style="padding-right:0.1rem">{{timesStart}}</p>
                    </div>
                    <ol class="flex">
                        <li class="txt_center">
                            <img src="../../common/image/averageSpeed.png" alt="">
                            <span>均速</span>
                            <em><i>{{averageSpeed(gapTime)}}</i>KM/h</em>
                        </li>
                        <li class="txt_center">
                            <img src="../../common/image/cusHour.png" alt="">
                            <span>耗时</span>
                            <em>{{trackTime(gapTime)}}</em>
                        </li>
                    </ol>
                    <div class="txt_center">
                        <p class="data">以上数据仅供参考</p>
                    </div>
                </div>
            </div>
        </div>
            <!-- 驾驶报告 -->
        <div class="car_report hide" style="padding-top:2.8rem;">
            <!-- 里程 -->
            <dl>
                <dt>
                    <h3>里程</h3>
                </dt>
                <dd class="clearfix">
                    <span class="fl">行程里程</span>
                    <span  class="fr r_public">{{distance}}KM</span>
                </dd>
            </dl>
            <!-- 耗时 -->
            <dl>
                <dt>
                    <h3>耗时</h3>
                </dt>
                <dd class="clearfix">
                    <span class="fl">总耗时</span>
                    <span  class="fr r_public">{{trackTime(gapTime)}}</span>
                </dd>
            </dl>
            <!-- 位置 -->
            <dl>
                <dt>
                    <h3>位置</h3>
                </dt>
                <dd class="clearfix border-line">
                    <span class="fl" style="line-height:0.48rem;">起始</span>
                    <span  class="fr r_public car_place">{{beginPos}}</span>
                </dd>
                 <dd class="clearfix">
                    <span class="fl" style="line-height:0.48rem;">终点</span>
                    <span  class="fr r_public car_place">{{endPos}}</span>
                </dd>
            </dl>
            <!-- 时间 -->
            <dl>
                <dt>
                    <h3>时间</h3>
                </dt>
                <dd class="clearfix border-line">
                    <span class="fl">起始时间</span>
                    <span  class="fr r_public">{{timesStart}}</span>
                </dd>
                <dd class="clearfix">
                    <span class="fl">结束时间</span>
                    <span  class="fr r_public">{{timesEnd}}</span>
                </dd>
            </dl>
            <div class="txt_center">
                 <p class="data_show">以上数据仅供参考</p>
            </div>
        </div>
    </section>
</body>
</html>
<script src="../../common/script/phoneSize.js"></script>
<script src="../../common/script/jquery-1.11.2.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vjxRk3m3YYQ4uglexlrOxEVwGc2Nw6kF"></script>
<script src="../../common/script/public.js"></script>
<script src="../public/westv.js"></script>
<script src="../public/vue.js"></script>
<script src="../public/baseAll.js"></script>
<script src="../public/trackDraw.js"></script>
<script src="../model/linetrack/routeTrack.js"></script>
<script type="text/javascript">
    $("#tour_tab_list li").on("touchstart",function(){
         var index=$(this).index();
         $(this).addClass("active").siblings().removeClass("active");
         $(".map_manger").toggle();
         $("#tab-cont").find(".car_report").eq(index).show().siblings().hide();
    });

    /*  根据时间起点与终点查询轨迹  实现绑路    andorid-----*/
    if(baseAll.isMobileDevice()=='android'){
        routeTrack.androidLoad();
    }
</script>